<script>
import mixin from './mixin'
export default {
    name:'RsSubMenu',
    inject: ['rootMenu'],
    mixins:[mixin],
    props:{
        index:null
    },
    data(){
        return{
            left:0,
            top:100,
            visible:false,
            items:[],
            submenus:[]
        }
    },
    computed:{
        style(){
            const obj = {
                left:`${this.left}px`,
                top:`${this.top}px`,
                minWidth:`${this.rootMenu.minWidth}px`,
                //display:this.visible?'block':'none',
                visibility:this.visible?'visible':'hidden'
            }
            if( this.rootMenu == this.$parent && !this.rootMenu.contextMenu ){
                obj.zIndex = this.rootMenu.zIndex;
            }
            return obj;
        },
        indexPath(){
            const path = [this.index];
            let parent = this.$parent;
            while (parent.$options.name !== 'RsMenu') {
                if (parent.index) {
                    path.unshift(parent.index);
                }
                parent = parent.$parent;
            }
            return path;
        }
    },
    watch:{
    },
    methods:{
        addSubmenu(item) {
            this.$set(this.submenus, this.submenus.length, item);
        },
        addMenuItem(item) {
            this.$set(this.items, this.items.length, item);
        }
    },
    mounted(){
        this.$parent.addSubmenu(this);
        this.$parent.addMenuItem(this);
    },
    render(){

        const { style,onEnterMenu,onLeaveMenu,onEnterMenuItem,onLeaveMenuItem } = this;
        const cls = {
            'rs-menu-item':true,
            'padding-left':(this.firstLevel && this.$slots.icon && !this.rootMenu.contextMenu )
        }
        const icon = this.$slots.icon?<div class="item-icon">{this.$slots.icon}</div>:'';
        let expandIcon = '';
        if( !this.firstLevel || this.rootMenu.contextMenu ){
            expandIcon = <i class="item-expand-right-icon rs-icon-right-fill"></i>
        }
        if( this.firstLevel && this.items.length > 0 ){
            expandIcon = <i class="item-expand-down-icon rs-icon-down-fill"></i>
            cls['padding-right'] = true;
        }
        //const expandIcon = (!this.firstLevel || this.rootMenu.contextMenu) ?<div class="item-expand-icon">▶</div>:'';
        return (
            <div class={{'rs-submenu':true,'expand':this.visible}}>
                <div class={cls} ref="menuItem"
                    on-mouseenter={(ev)=>{onEnterMenuItem(ev,this.rootMenu)}}
                    on-mouseleave={(ev)=>{onLeaveMenuItem(ev,this.rootMenu)}}
                >
                    {icon}
                    <div class="item-text">{this.$slots.text}</div>
                    {expandIcon}
                </div>
                
                <div class="rs-menu" style={[style]} v-show={this.visible} ref="rsMenu"
                    on-mouseenter={(ev)=>{onEnterMenu(ev,this.rootMenu)}}
                    on-mouseleave={(ev)=>{onLeaveMenu(ev,this.rootMenu)}}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
}
</script>
<style lang="scss">
.rs-sub-menu-enter-active,
.rs-sub-menu-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: top left;
}
.rs-sub-menu-enter,
.rs-sub-menu-leave-active {
  opacity: 0;
  transform: scale(.45, .45);
}
</style>